<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>Test Drag</title> 
	<style>
		img{ position:absolute; }
		.move { cursor: move; }
		body{ width:100%; height:800px; }
	</style>
	<script src="../lib/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> 
	<script> 
		$( function(){
			
			var w = 240, h = 171;
			var 
			CELL_WIDTH	= 50,
			CELL_HEIGHT	= CELL_WIDTH,
			CELL_XNUM	= 25,
			CELL_YNUM	= 25,
			
			MAX_H = CELL_HEIGHT * CELL_YNUM,
			MAX_W = CELL_WIDTH * CELL_XNUM;
			
			var ctx = document.getElementById('canvas').getContext('2d');  
			
			ctx.fillStyle = "#ff0000"
			ctx.fillRect( 0, 0 , 400, 400 );

			ctx.save();
			ctx.strokeStyle  = "#80ff80";
			ctx.beginPath();
			
			//竖线
			for (var i=1; i<CELL_XNUM; i++) {
				ctx.moveTo( i * CELL_WIDTH  , 0 ); 
				ctx.lineTo( i * CELL_WIDTH  , MAX_H );
			}
			//横线
			for (var i=1; i<CELL_YNUM; i++) {
				ctx.moveTo( 0, i * CELL_HEIGHT ); 
				ctx.lineTo( MAX_W, i * CELL_HEIGHT);		
			}
			ctx.closePath()			
			ctx.stroke();			
			ctx.restore();
			
		   var lineargradient = ctx.createLinearGradient(0,0,150,150);  
		   lineargradient.addColorStop(0,'white');  
		   lineargradient.addColorStop(1,'black');  
   			
			ctx.strokeStyle  = lineargradient;			
			ctx.shadowOffsetX = 50;  
			ctx.shadowOffsetY = 50;  
			ctx.shadowBlur = 50;  
			ctx.shadowColor = "rgba(0, 0, 0, 0.5)";  		
			var we = 50, half = we / 2;	
			
			ctx.translate( half, half  );
			
			ctx.lineWidth = we;
			
			//ctx.strokeRect( 100 + half, 100 +half  , 200 - we, 200 -we );
			ctx.strokeRect( 100 , 100  , 200 -we , 200 -we );
									
		} );
		

		
		
			
	</script> 
</head> 
<body id="canvasdemo"> 
	<canvas id="canvas" width="400" height="400" ></canvas> 
	<canvas id="canvas2" width="400" height="400" ></canvas> 
</body> 
<script></script>
</html>